<script>
import {mapState} from "vuex";
import TreeNode from "@/components/antSecondaryPackage/TreeNode";
import {uploadFile} from "@/apis/getAPIClass";

export default {
  name: "MenuRouting",
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {}
    }
  },
  methods: {
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
    onSubmit() {
      console.log('submit!', this.form);
    },
    async upload() {
       // 获取文件方式 一
      // let file = this.$refs.fileRef.files[0];
      // 获取文件方式 二
      let file = document.getElementById("fileID").files[0];
      await uploadFile(this, file, "上传后端接口", "fileID");
    }
  },
  computed: {
    ...mapState({
      sidBar: state => state.menu.sidBar, // 侧面导航栏数据
    })
  },
  components:{
    TreeNode
  }
}
</script>

<template>
  <div class="menu-routing-container">
    <a-card class=" mr-10 routing-card_left">
            <a-button type="primary" @click="upload">添加一级菜单</a-button>
<!--      <button @click="upload">上 传</button>-->
<!--      <input ref="fileRef" type="file" id="fileID"/>、-->
      <TreeNode @select="onSelect" :tree-data="sidBar" :show-icon="true" :show-line="true"></TreeNode>
    </a-card>
    <a-card class="routing-card" :title="form.title?form.title+'菜单设置':''">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="菜单标题">
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="图标">
          <a-input v-model="form.icon" />
        </a-form-model-item>
        <a-form-model-item label="所属模块">
          <a-input v-model="form.parentMenuId" />
        </a-form-model-item>
        <a-form-model-item label="页面路由">
          <a-input v-model="form.path" />
        </a-form-model-item>
        <a-form-model-item label="菜单名">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="组件路径">
          <a-input v-model="form.component" />
        </a-form-model-item>
        <a-form-model-item label="重定向至">
          <a-input v-model="form.redirect" />
        </a-form-model-item>
        <a-form-model-item label="是否隐藏">
          <a-radio-group v-model="form.isVisible">
            <a-radio value="1">
              显示
            </a-radio>
            <a-radio value="0">
              隐藏
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="菜单描述">
          <a-input v-model="form.desc" type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="子菜单">
          <a-button type="danger" @click="onSubmit">
            添 加
          </a-button>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">
            保 存
          </a-button>
          <a-button style="margin-left: 10px;">
            重 置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<style scoped lang="less">
.menu-routing-container{
  display: flex;
  height: 100%;
  .routing-card {
    flex: 1;
    height: 100%;
    overflow-y: auto;
  }
  .routing-card_left{
    width: 400px;
    height: 100%;
    overflow-y: auto;
  }
}
</style>